<template>
  <div class="bg-gray-100">
    <div class="bg-white py-10 mb-4">
      <Container>
        <!-- 内容区域 -->

        <div class="flex w-full">
          <!-- 课程介绍 -->
          <div class="bg w-1/2"></div>
          <!-- 左图右文 -->
          <div class="w-1/2">
            <div class="text-3xl">课程名称</div>
            <div class="text-gray-300 mb-4 line-clamp-3">
              <!-- line-clamp-3 是当内容多了省略显示，3 -->
              课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述课程描述
            </div>
            <div class="flex text-sm mb-4 text-gray-300">
              <span class="pr-2">toimcBrain</span>|
              <span class="pl-2">前端🐮哒</span>
            </div>
            <div class="text-orange mb-8 text-2xl">¥3999.00</div>
            <div class="flex">
              <!-- 加入购物车、收藏button -->

              <div class="btn mr-4">加入购物车</div>
              <div class="btn-plain px-10 py-2">收藏</div>
            </div>
          </div>
        </div>
      </Container>
    </div>
    <Container>
      <!-- 课程详情 -->
      <div class="w-full flex">
        <div class="w-[calc(75%-1rem)] bg-white mr-4">
          <!-- tabs -->
          <div class="border-b-1 border-b-color-gray-200">
            <!-- tabs 标题 -->
            <Tabs :items="['课程介绍', '章节目录', '学员评价']"  v-model="activeIndex"/>
          </div>
          <div>
            <!-- tabs content -->
          </div>
          <div class="p-4">
            <!-- 左边是markdown 的详情 -->
            <router-view></router-view>
            <!-- 课程目录 -->
            <!-- 评价 -->
          </div>
        </div>
        <!-- 右边是侧边栏 -->
        <div class="w-1/4">
          <!-- <div class="bg-white mb-2 h-20">边栏1</div>
          <div class="bg-white mb-2 h-20">边栏2</div> -->
           <div class="bg-white mb-2 h-120">边栏</div>
          <div class="bg-white mb-2 last:mb-0 h-120">边栏2</div>
        </div>
      </div>
    </Container>
  </div>
</template>

<script setup lang="ts">
const activeIndex = ref(0)

provide('activeIndex', activeIndex)
// import { useParams } from "@/hooks/useParams";
// type Params = {
//   id: string;
// };
// const route = useParams<Params>();
</script>

<style scoped lang="scss">
//  增加下边框的css
.tabs {
  .active {
    @apply text-sky-400 relative;

    &:after {
      @apply content-empty absolute bg-sky-400 w-8 h-[2px] bottom-0 left-[calc(50%-1rem)];
    }
  }
}
</style>
